<template>
    <el-dialog @open="open" v-model="props.modArticle" :title="props.type==='read'?'阅读':props.type==='add'?'添加文章':'修改文章'" @close="close"
               style="width: 60%">
        <el-form v-show="props.type!=='read'" ref="dataForm" :rules="rules" :model="form" label-width="100px" align="center">
            <el-form-item>
                <el-button v-show='props.type=="add"' type="primary" @click="addArticle">添加</el-button>
                <el-button v-show="props.type=='edit'" type="warning" @click="updateArticle">更新</el-button>
                <el-button @click="close" type="primary" >取消</el-button>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input :disabled ="props.type=='edit'"  v-model="form.title" type="text" maxlength="25"  show-word-limit />
            </el-form-item>
            <el-form-item label="封面图" prop="coverImg">
                <UploadFile type="article" :id="form.id" :edit="props.type" fileType="image" :imgUrl="form.coverImg"
                            @uploadSuccess="uploadSuccess"
                />
            </el-form-item>
            <el-form-item label="文章内容" prop="content">
                <MyEditor :content="sourceContent" @setContent="setContent"/>
            </el-form-item>
            <el-form-item>
                <el-button v-show='props.type=="add"' type="primary" @click="addArticle">添加</el-button>
                <el-button v-show="props.type=='edit'" type="warning" @click="updateArticle">更新</el-button>
                <el-button @click="close" type="primary" >取消</el-button>
            </el-form-item>
        </el-form>
        <div v-show="props.type==='read'" v-html="sourceContent"></div>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,onUpdated} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import MyEditor from '@/components/common/MyEditor.vue'
    import UploadFile from "@/components/common/UploadFile.vue"

    let currentContent = ref("")
    let sourceContent = ref("")
    const  emits = defineEmits(['close','reload'])

    let dataForm = ref(null)
    let props = defineProps(['modArticle','type','id'])
    let form = reactive({})
    const rules = reactive({
            title: [{required: true,message: '请输入标题', trigger: 'blur'},],
            content: [{required: true,message: '请输入文章内容', trigger: 'blur'},],
            coverImg: [{required: true,message: '请输入封面图', trigger: 'blur'},],
    })
    function open() {
        if(props.modArticle==true){
            if(props.type=='edit'||props.type=='read'){
                request.get(`/api/article/getArticleById/${props.id}`).then(resp => {
                    for(let key in resp){
                        form[key] = resp[key]
                    }
                    sourceContent.value = resp.content
                })
            }else if(props.type=="add"){
                for(let key in form){
                    delete form[key]
                }
                sourceContent.value = ""
            }
        }
    }

    function close(){
        emits("close")
        dataForm.value.resetFields()//重置表单校验
    }

    function addArticle(){
        form.content = currentContent.value
        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                request.post("/api/article/add",form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '添加成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function updateArticle(){
        form.content = currentContent.value
        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                request.post("/api/article/update",form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function setContent(content) {
        currentContent.value = content
    }
    function uploadSuccess(fileUrl){
        form.coverImg = fileUrl
    }
</script>

<style scoped>

</style>